<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	
	<title>Registration</title>
	
	<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
	

	<script src="js/jquery-1.2.6.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/form-fun.jquery.js" type="text/javascript" charset="utf-8"></script>
	<script>
                         var testInputEmail = function($input, showValid) {
                        	    var wzorMaila = /^[0-9a-zA-Z_.-]+@[0-9a-zA-Z.-]+\.[a-zA-Z]{2,3}$/
                        	 
                        	    $object = (options.parentElement!='')?$input.parents(options.parentElement) : $input;
                        	 
                        	    if (!wzorMaila.test($input.val())) {
                        	        $object.removeClass(options.classOk).addClass(options.classError);
                        	        return false;
                        	    } else {
                        	        if (showValid) {
                        	            $object.removeClass(options.classError).addClass(options.classOk);
                        	        }
                        	        return true;
                        	    }    
                        	}
                         
                         
                         var testInputText = function($input) {                        
                        	    if ($input.val()=='') {            
                        	        $object.removeClass(options.classOk).addClass(options.classError);
                        	        options.isInvalid($input);
                        	        return false;
                        	    } else {
                        	        $object.removeClass(options.classError).addClass(options.classOk);
                        	        options.isValid($input);        
                        	        return true;
                        	    }
                        	}
                        
                         $.fn.ownFormValidate = function(options) {
                        	    options = $.extend({
                        	        classError   : 'invalid',
                        	        classOk      : 'valid'
                        	    }, options);        
                        	 
                        	    var $form = $(this);
                        	 
                        	    var prepareElements = function() {    
                        	        $form.find('input[required], textarea[required], select[required]').each(function() {
                        	               var $t = $(this);
                        	               $t.removeAttr('required');
                        	               $t.addClass('required');
                        	    
                        	               if ($t.is('input')) {
                        	                   var type = $t.attr('type').toLowerCase();
                        	                   if (type == 'text') {
                        	                       $t.on('blur keyup', function() {testInputText($t)});
                        	                   if (type == 'email') {
                        	                	   $t.on('blur keyup', function() {testInputEmail($t, true)});     
                        	                	    if (options.initialValidate) testInputEmail($t, options.showValidOnCheck) 
                        	                   } 
                        	                   if (type == 'url') {
                        	                       ...
                        	                   }
                        	                   if (type == 'text') {
                        	                       ...
                        	                   }
                        	                   if (type == 'checkbox') {                
                        	                       ...
                        	                   }
                        	                   if (type == 'radio') {                
                        	                       ...
                        	                   }
                        	               }
                        	               if ($t.is('textarea')) {
                        	                   ...
                        	               }
                        	               if ($t.is('select')) {
                        	                   ...
                        	               }
                        	           });
                        	   }
                        	   prepareElements(); 
                        	}
                         </script>
	
	
	<!--[if IE]>
		<style type="text/css">
			legend { 
				position: relative;
				top: -30px;
			}
			
			fieldset {
				margin: 30px 10px 0 0;
			}
		</style>
		
		<script type="text/javascript">
			$(function(){
				$("#step_2 legend").css({ opacity: 0.5 });
				$("#step_3 legend").css({ opacity: 0.5 });
			});
		</script>
	<![endif]-->
</head>


<body>
	
	<div id="page-wrap">
		
		<h1>User <span>Registration</span></h1>

		<form action="#" method="post" id="formularz">

			<fieldset id="step_1">
			
				<legend>Step 1</legend>
			
				<label for="num_attendees">
					Are you company or private person?
				</label>
				<select id="num_attendees">
					<option id="opt_0" value="0">Please Choose</option>
					<option id="opt_1" value="1">Private person</option>
					<option id="opt_2" value="2">Company</option>
					
				</select>
			
				<br />
			
				<div id="attendee_1_wrap" class="name_wrap push">
					<p>Please provide basic data:</p><br>
				
					<label for="name_attendee_1">
							E-mail:
					</label>
					<input type="email" id="name_attendee_1" class="name_input"></input>
				</div>
			
				<div id="attendee_2_wrap" class="name_wrap">
					<label for="name_attendee_2">
							Password:
					</label>
					<input type="text" id="name_attendee_2" class="name_input"></input>
				</div>
			
				<div id="attendee_3_wrap" class="name_wrap">
					<label for="name_attendee_3">
							Company name:
					</label>
					<input type="text" id="name_attendee_3" class="name_input"></input>
				</div>
			
				
			</fieldset>
		
			<fieldset id="step_2">
			
				<legend>Step 2</legend>
			
				<p>
					Please provide personal data
				</p>
				<br></br>
				<div id="tescik">
				<div style = "width: 100%; float: left;">
					<label for="name_attendee_2" style = "font-size: 12px; display: block; width: 102px; float: left;">
							City:
					</label>
					<input type="text" class="pd" required></input>
				</div>
				
				<div style = "width: 100%; float: left;">
					<label for="name_attendee_3" style = "font-size: 12px; display: block; width: 102px; float: left;">
							Street:
					</label>
					<input type="text" class="pd"></input>
				</div>
				<div style = "width: 100%; float: left;">
					<label for="name_attendee_4" style = "font-size: 12px; display: block; width: 102px; float: left;">
							Local number:
					</label>
					<input type="text" class="pd"></input>
				</div>
				<div style = "width: 100%; float: left;">
					<label for="name_attendee_5" style = "font-size: 12px; display: block; width: 102px; float: left;">
							NIP:
					</label>
					<input type="text" class="pd"></input>
				</div>
			<div style = "width: 100%; float: left;">
					<label for="name_attendee_6" style = "font-size: 12px; display: block; width: 102px; float: left;">
							Phone:
					</label>
					<input type="text" class="pd"></input>
				</div>
				</div>
			
			</fieldset>
		
			<fieldset id="step_3">
				<legend>Step 3</legend>
			
				<label for="question">
					Select question and type answer ?
				</label><br></br>
				<div id="question_div">
				<select id="question"  style = "width: 100%; float: left;">
				<option id="opt_0" value="0">Please choose</option>
					<option id="opt_0" value="1">What's your favorite car ?</option>
					<option id="opt_1" value="2">What's your profession?</option>
					<option id="opt_2" value="3">What's your opinion about Andrew</option>
					
				</select>
				<br></br>
				<div id="attendee_2_wrap"  style = "width: 100%; float: left;">
					<label for="name_attendee_2" style = "font-size: 12px; display: block; width: 102px; float: left;">
							Answer:
					</label>
					<input type="text" class="dp"></input>
				</div>
			
			<div>
				<input type="submit" id="submit_button" class="push" value="Complete Registration"></input>
			</div>
			</div>
			</fieldset>

		</form>
	
	</div>

</body>

</html>